1. Selectors分別取到什麼?

getElementBy- : 較早期語法
document.getElementsByClassName('xxx') 取得所有DOM (HTMLCollection)
document.querySelector('xxx') 取得所有節點 (NodeList)
document.querySelectorAll('xxx') 取得所有節點

getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

2. Q: HTMLCollection 和 NodeList 使用上差異? 補

HTMLCollection

DOM 節點有4種: element、attribute、text、comment
HTMLCollection會篩選出 element類型的節點(HTML元素形成的節點)。

<ul>
    <li> a </li>
    <li> b </li>
    <li> c </li>
</ul>

錯誤寫法
document.querySelectorAll('ul').children
//undefined

正確寫法
document.querySelector('ul').children
// HTMLCollection(3)[li, li, li]

正確寫法
document.querySelectorAll("ul li")
//NodeList(3) [li, li, li]

NodeList 只能唯讀操作，不能新增刪除元素

let item = document.querySelectorAll("li")

• 查看長度 item.length //3
• 遍歷內容 item.forEach(i => console.log(i))

• 使用 index 來存取特定項目 item[2] // <li>c</li>
  NodeList和DOM是連動的，在DevTool中需透過DOM操作修改網頁內容。

  

3. 類陣列使用情境

情境: 當有相同名稱 class="box" 時，一同選取3個元素做監聽或迭代，2種選取方法都是得到 類陣列的集合 => 無法使用陣列的方法

<div class="box" id="0"></div>
<div class="box" id="1"></div>
<div class="box" id="2"></div>

4. Q:取得 類陣列 後如何使用陣列的方法?

A:轉換為陣列 Array.from(類陣列)

Array.from((必)target: 類陣列or可迭代物件, (選) mapFn, (選) thisValue)

不改變原本的target
回傳: 陣列

(必)target: 要轉成貞烈的對象:類陣列or可迭代物件 |default: 無

• 類陣列:

  • selectors選取後的集合(HTMLCollection / NodeList)
  • 物件具有 length 屬性以及索引（indexed）的元素

• 可迭代物件: 補

(選) mapFn: function |default: undefined

• map方法遍歷陣列元素

(選) thisValue object |default: undefined

• 指定mapFn方法的this對象

function plusValue(numbers) {
  return Array.from(arguments, (number)=> number + 10);
}
console.log(plusValue(1, 2, 3))
// [object Array] (3)
[11,12,13]

CSS Selectors -選擇器可以定義某組 CSS 樣式要套用到哪些元素上。

getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getElementsByTagNameNS()
querySelector()
querySelectorAll()